<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 挂载点 -->
    <div id="app">
      <h1>自定义指令</h1>
      <div v-red>你好</div>
      <div v-color="a">你好</div>
      <p>自动获取焦点：</p>
      <input type="text" v-focus></input>

      <p>未使用自动获取焦点：</p>
      <input type="text" ></input>
    </div>
    <!-- 方式一 自定义全局指令     方式二 自定义局部指令 -->
    <script type="text/javascript">
      // 注册
      Vue.directive("red", {
        inserted: function (el, binding) {
          el.style.color = "red";
        }
      });
      Vue.directive("color1", function (el, binding) {
        el.style.color = binding.value;
      });
      var vm = new Vue({
        // 挂载点
        el: "#app",
        data: {
         a:'blue'
        },
        directives: {
          color: function (el, binding) {
            el.style.color = binding.value;
          },
          focus: {
            inserted: function (el) {
              el.focus();
            }
          }
        },
      });
    </script>
  </body>
</html>
